<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./index.css" />
  </head>

  <body>
    <div class="box">
      <!-- 图片 -->
      <div class="img_box">
        <!-- 图片列表 -->
        <ul></ul>
        <!-- 左右箭头 -->
        <div class="arrow_left">&lt;</div>
        <div class="arrow_right">&gt;</div>
      </div>

      <!-- 小圆点 -->
      <div class="dot_box">
        <span class="dotActive dot" data-index="1"></span>
        <span class="dot" data-index="2"></span>
        <span class="dot" data-index="3"></span>
        <span class="dot" data-index="4"></span>
      </div>
    </div>

    <script src="./packageAjax.js"></script>


    <script>
      let box = document.querySelector(".box");
      let imgBoxUl = box.querySelector(".img_box > ul");
      let dot_box = box.querySelector(".dot_box");
      let timer; // 自动轮播定时器

      //   ajax获取图片
      ajax(
        "get",
        "http://studentback.dfbuff.xyz/getMethod",
        function (res) {
            // console.log(res.result.length);
          res.result.forEach(function (item) {
            imgBoxUl.innerHTML += `<li><a><img src=${item.content}></a></li>`;
          });
          // 插入克隆的第一张图片到最后一张图片之后的位置
          imgBoxUl.appendChild(imgBoxUl.firstElementChild.cloneNode(true));
          // 插入克隆的第四张图片到第一张之前的位置
          imgBoxUl.insertBefore(
            imgBoxUl.children[imgBoxUl.children.length - 2].cloneNode(true),
            imgBoxUl.firstElementChild
          );

          // 动态生成图片(第一张和最后一张)
          // console.log(imgBoxUl.firstElementChild.cloneNode(true));
          // console.log(imgBoxUl.lastElementChild.cloneNode(true));

          // 初始化下标
          let index = 1;
          // 获取上一个操作的index
          let lastIndex = 1;
          // 移动到原来第一张图片的位置
          imgBoxUl.style.transform = `translateX(-${index}00%)`;
          setTimeout(function () {
            imgBoxUl.style.transition = "0.2s ease-in-out";
          }, 300);
          let flag = true; // 设置开关, 默认可以打开

          // 事件代理
          box.addEventListener("click", function (event) {
            // 左箭头
            event.target.className == "arrow_left" && arrowLeftFn(event.target);
            // 右箭头
            event.target.className == "arrow_right" &&
              arrowRightFn(event.target);
            // 小圆点
            event.target.classList.contains("dot") && dotFn(event.target);
          });

          // 点击右箭头事件
          function arrowRightFn(target) {
            if (flag) {
              flagFn();
              imgBoxUl.style.transform = `translateX(-${++index}00%)`;
              // 判断是否到达最后一张
              limit(imgBoxUl.children.length - 1, 1);
              // 获取具体span标签
              let rBtnEvent =
                target.parentElement.nextElementSibling.children[index - 1];
              dotColor(rBtnEvent);
            }
          }

          // 点击左箭头事件
          function arrowLeftFn(target) {
            if (flag) {
              flagFn();
              imgBoxUl.style.transform = `translateX(-${--index}00%)`;
              // 判断是否是第一张
              limit(0, imgBoxUl.children.length - 2);
              // 获取具体span标签
              let lBtnEvent =
                target.parentElement.nextElementSibling.children[index - 1];
              dotColor(lBtnEvent);
            }
          }

          // 临界点跳转图片
          function limit(limitIndex, setIndex) {
            // limitIndex 设置限制下标
            // setIndex   设置对于下标
            if (index == limitIndex) {
              index = setIndex;
              imgBoxUl.addEventListener("transitionend", function () {
                // 清除过渡效果, 并且ul恢复位置
                imgBoxUl.style.transition = "none";
                imgBoxUl.style.transform = `translateX(-${index}00%)`;

                // 恢复过渡效果
                // 获取最终样式(被计算的样式)
                window
                  .getComputedStyle(imgBoxUl, "style")
                  .getPropertyValue("transition-duration");
                imgBoxUl.style.transition = "0.2s ease-in-out";
              });
            }
          }

          // 小圆点点击事件
          function dotFn(target) {
            // 获取自定义属性的值，这个值可以和index对应
            let dataIndex = target.getAttribute("data-index");
            // 操作的值重新赋值到index，那么index就可以更新
            index = dataIndex;
            imgBoxUl.style.transform = `translateX(-${index}00%)`;
            // 调用小圆点颜色函数
            dotColor(target);
          }

          // 封装小圆点颜色变化函数
          function dotColor(tag) {
            // console.log(tag);
            tag.parentElement.children[lastIndex - 1].classList.remove(
              "dotActive"
            );
            tag.classList.add("dotActive");
            // 重新赋值给lastIndex，目的是为了拿到上一次的操作值index
            lastIndex = index;
          }
          // 控制开关
          function flagFn() {
            // 关闭开关
            flag = false;
            imgBoxUl.addEventListener("transitionend", function () {
              flag = true;
            });
          }

          // 自动轮播,设置定时器
          timeFn();
          function timeFn() {
            if (timer) {
              clearInterval(timer);
            }
            timer = setInterval(function () {
              arrowRightFn(box.firstElementChild.lastElementChild);
            }, 1000);
          }

          // 鼠标移入box区域，停止定时器
          box.addEventListener("mouseenter", function () {
            clearInterval(timer);
          });
          // 鼠标移出box区域，开始定时器
          box.addEventListener("mouseleave", function () {
            setTimeout(timeFn, 2000);
          });

          // 检测页面是否切换，切换就停止定时器
          window.addEventListener("visibilitychange", function () {
            if (document.hidden) {
              clearInterval(timer);
            } else {
              timeFn();
            }
          });
        },
        {
          type: "图片",
        }
      );
    </script>
  </body>
</html>
